<template>
  <div id="container" style="width: 100%">
    <vqqmap v-model="location" @update="mapChange" :options="options"></vqqmap>
  </div>
</template>
<script lang='ts'>
import { defineComponent, reactive } from 'vue'

import vqqmap from 'vue-qqmap'

export default defineComponent({
  components: { vqqmap },
  setup() {
    let location = reactive({ lat: '', lng: '', address: '' })
    let options = reactive({
      key: '446BZ-QAK64-7JIUE-DBTOF-7HDCF-XHBCI',
    })
    function mapChange(data) {
      console.log(data)
    }
    return {
      location,
      options,
      mapChange,
    }
  },
})
</script>
<style  lang="less">
#container > .cuteMap {
  width: 100% !important;
}
</style>
